<template>
  <div class="app-container dashboard-container screenPad" :class="{ 'line-img' : showLineImg}">
    <!-- 循环引入组件 -->
    <!-- @click="secondPage(item.label, item.component)" -->
    <article
      v-for="(item, index) in list"
      :key="item.id"
      class="tab-box"
      @click="secondPage(item.label, item.component, item.isShow)"
    >
      <h4 v-if="item.isShow" class="tab-box-head">{{ item.label }} <em><i /><i /></em></h4>
      <div v-if="item.isShow" class="tab-box-body">
        <!-- 动态组件内容 -->
        <component
          :is="iscomponent(index)"
        />
      </div>
    </article>

    <!-- 动态渲染二级layer -->
    <vxe-modal
      v-for="(item, key) in secondPageDialog"
      :id="key"
      :key="key"
      v-model="secondPageDialog[key]"
      width="800"
      height="600"
      show-zoom
      class-name="layer-style"
    >
      <template #title>
        <span>{{ key | secondName }}</span>
      </template>
      <template #default>
        <component
          :is="isSecond(key)"
        />
      </template>
    </vxe-modal>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { AlarmTypes, AlertsInfo, Capacity, CurrentProduct, LineStatus, LiquidMedicine, LiveVideo, LowQuality, ParamsStatus, PersonnelAnalysis, ProductFeatures, YieldCount } from '@/components/Screen'
import { sortArrObj } from '@/utils'
import { defaultCompList } from '@/api/default-apis'
import { getConfigByRegionId } from '@/api/conf'
// 利用 require.context 一次性引入全部二级页面
const path = require('path')
const allSecondPage = require.context('@/views/screenSecond', false, /\.vue$/)
const secondComp = {}
allSecondPage.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  secondComp[name] = allSecondPage(key).default || allSecondPage(key)
})

export default {
  name: 'Dashboard',
  components: { AlarmTypes, AlertsInfo, Capacity, CurrentProduct, LineStatus, LiquidMedicine, LiveVideo, LowQuality, ParamsStatus, PersonnelAnalysis, ProductFeatures, YieldCount, ...secondComp },
  filters: {
    secondName(key) {
      const temp = [
        { id: 1, label: '产线状态', isShow: true, component: 'LineStatus', parentId: 110 },
        { id: 2, label: '报警分类', isShow: true, component: 'AlarmTypes', parentId: 110 },
        { id: 3, label: '产能达成', isShow: true, component: 'Capacity', parentId: 110 },
        { id: 4, label: '现场视频', isShow: true, component: 'LiveVideo', parentId: 110 },
        { id: 5, label: '当前产品', isShow: true, component: 'CurrentProduct', parentId: 110 },
        { id: 6, label: '人员分析', isShow: true, component: 'PersonnelAnalysis', parentId: 110 },
        { id: 7, label: '产品良率', isShow: true, component: 'YieldCount', parentId: 110 },
        { id: 8, label: '不良分布', isShow: true, component: 'LowQuality', parentId: 110 },
        { id: 9, label: '药水分析', isShow: true, component: 'LiquidMedicine', parentId: 110 },
        { id: 10, label: '参数状态', isShow: true, component: 'ParamsStatus', parentId: 110 },
        { id: 11, label: '产品特性', isShow: true, component: 'ProductFeatures', parentId: 110 },
        { id: 12, label: '异常信息', isShow: true, component: 'AlertsInfo', parentId: 110 },
        { id: 13, label: '大屏底图', isShow: true, component: '', parentId: 110 }
      ]
      return temp.filter((item) => {
        return item.component === key
      })[0].label + '二阶'
    }
  },
  data() {
    return {
      list: [],
      showLineImg: false,
      // 有二级界面的模块,以及是否显示
      secondPageDialog: {
        'AlarmTypes': false, 'Capacity': false, 'LineStatus': false, 'LiquidMedicine': false, 'ParamsStatus': false, 'ProductFeatures': false, 'YieldCount': false, 'PersonnelAnalysis': false
      },
      regionid: 0,
      lineId: 0,
      cTitle: '',
      currentView: {},
      timer: null,
      timerCount: 0,
      interval: 1000 * 60
    }
  },
  computed: {
    ...mapGetters([
      // 'regionid',
      // 'lineId'
      'title'
    ])
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  },
  created() {
    // console.log(this.router)
    this.getCurrentView()
  },
  methods: {
    getCurrentView() {
      this.regionid = this.$Cookies.get('currentReginid')
      // console.log(this.regionid)
      this.init()
    },
    init() {
      getConfigByRegionId({ regionid: this.regionid }).then(res => {
        const conf = res.data[0]
        if (res.data.length > 0) {
          defaultCompList().then(complist => {
            // console.log('complist', complist)
            complist.forEach(item => {
              item.isShow = conf[item.field] === 1
              item.sort = conf[item.sortStr]
              if (item.field === 'map') {
                this.showLineImg = conf.map === 1
              }
            })
            complist.sort(sortArrObj('sort'))
            this.list = JSON.parse(JSON.stringify(complist))
            this.list.pop()
          })
        } else {
          this.$message({
            message: '无配置信息',
            type: 'warning'
          })
        }
      })
      this.pageRefresh()
    },
    iscomponent(index) {
      return this.list[index].component
    },
    isSecond(key) {
      key += 'Second'
      // 驼峰组件名转为短横线连接 AlarmTypesSecond => alarm-types-second, 用于二级页面的组件
      return key.replace(/([A-Z])/g, '-$1').toLowerCase().slice(1)
    },
    // 打开二阶弹窗
    secondPage(pageName, component, isShow) {
      if (isShow) {
        const hasSecondPage = Object.keys(this.secondPageDialog)
        // 有二级则弹窗
        if (hasSecondPage.indexOf(component) !== -1) {
          this.secondPageDialog[component] = true
          // 赋值二级界面 组件名
          this.secondPageVisible(component)
        }
      }
    },
    secondPageVisible(component) {
      this.secondPageDialog[component] = true
    },
    pageRefresh() {
      // console.log('this.timerCount =', this.timerCount)
      if (this.timerCount >= 60) { // 刷到60次就重载页面
        window.location.reload()
      }
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        this.pageRefresh()
        this.timerCount++
      }, this.interval)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/screenPad.scss";

.dashboard-container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .ProductFeatures{
    .el-row{
      height: 100%;
    }
  }

  article {
    cursor: pointer;
  }
}
  .header-title{
      display: flex;
      justify-content: flex-end;
      margin-right: 10px;

          button.el-button--text{
          color: #fff;
        }
  }
  .just-click {
  cursor: pointer;
  width: 100px;
  height: 40px;
  position: fixed;
  background: white;
  color: black;
  line-height: 40px;
  text-align: center;
}
.multi-dialog {
  position: fixed;
  width: 580px;
  background: rgba(0,93,172,0.75);
  box-shadow: 0px 0px 12px rgba(0,186,255,0.5);
  top: 20px;
  left: 20px;
  z-index: 10;
  font-size: 14px;
}
.multi-dialog-title {
  padding: 20px;
  border: 1px solid rgba(0,93,172,0.75);
  border-top: 2px solid rgba(127,255,255);
  cursor: move;
  font-size: 18px;
}
.multi-dialog-content {
  padding: 10px;
}
</style>
